<template>
  <div class="shopcar-container">
<!--    商品列表区域-->
    <div class="goods-list">
      <div class="mui-card">
        <div class="mui-card-content" v-for="item in goodslist" :key="item.id">
          <div class="mui-card-content-inner flex">
          <div class="mui-input-row mui-checkbox mui-left">
<!--            单选框-->
            <label>
            </label>
            <input type="checkbox" v-model="getGoodsSelected[item.id]" @change="selectChanged(item.id,getGoodsSelected[item.id])">
          </div>
<!--            商品的缩略图-->
            <img :src="item.img" alt="">
<!--            商品价格数量-->
            <div class="info">
<!--              商品标题-->
              <h1>{{item.name}}</h1>
<!--              商品价格、商品数量、删除按钮-->
              <p class="flex">
              <span class="price">${{item.price}}</span>
<!--                Numbox数量选项卡-->
                <num-box :size="'small'" :initcount="item.count" :goodsid="item.id"
                @count="countChanged"></num-box>
                <!--                删除按钮-->
              <button>删除</button>

              </p>
            </div>
        </div>
        </div>
      </div>
      <div class="mui-card">
        <div class="mui-card-content">
          <div class="mui-card-content-inner balance">
            <div class="left">
              <p>总计（不含运费）：</p>
              <p>已勾选商品 <span class="red">{{getSelectedCount}}</span>件,

              总价 <span class="red">￥{{getSelectedAmount}}</span>元

              </p>
            </div>
            <button class="mui-btn mui-btn-primary">去结算</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState, mapGetters} from 'vuex'
import NumBox from '../../tools/NumBox'
export default {
  name: 'ShopcartContent',
  components: {
    NumBox
  },
  computed:{
    //mapState辅助函数，能够快速获取vuex中的state容器中的数据
    ...mapState('shopcart',['cart']),
    ...mapGetters('shopcart',['getGoodsSelected','getSelectedCount','getSelectedGoods']),
    getSelectedAmount() {
      const selectedGoods=this.getSelectedGoods
      var amount=0
      this.goodslist.forEach(item=>{
        if(selectedGoods[item.id]){
          amount += item.price * selectedGoods[item.id].count
        }
      })
      return amount
    }
  },
  data(){
    return{
      // 临时数组，用来储存从vuex中获取到的购物车商品信息cart数组
// 因为当前页面需要对获取到的商品数据做处理，所以为了防止原始数据cart数组在处理时发生数据变化
// 我们使用临时数组goodslist备份cart数组的数据，然后数据处理就在goodslist中进行
      goodslist:[]
    }
  },
  methods:{
    getGoodsList() {
      this.cart.forEach(item=>this.goodslist.push(item))
    },
    selectChanged (id,selected){
      this.$store.commit('shopcart/updateGoodsSelected',{
        id:id,
        selected:selected
      })

    },
    countChanged(goodsinfo) {
      this.$store.commit('shopcart/updateGoodsInfo',goodsinfo)
    }
  },
  remove(id){
    this.goodslist.some((item,index)=>{
      if(parseInt(item.id)===parseInt(id)){
        this.goodslist.splice(index,1)
        return true
      }
    })
    this.$store.commit('shopcart/removeShopcart')
  },
  created() {
    this.getGoodsList()
  }
}
</script>

<style scoped lang="stylus">
  .flex
    display flex
  .shopcar-container
    overflow hidden
    .goods-list
      .balance
        display flex
        justify-content space-between
        align-items center
        .red
          color red
          font-weight bold
          font-size 16px


      .mui-card-content-inner
        align-items center
        padding 10px
        .mui-checkbox.mui-left input[type='checkbox']
          left 0px
        .mui-radio.mui-left label, .mui-checkbox.mui-left label
          padding-left 20px
          padding-right 35px
          padding-bottom 22px
        img
          width 60px
        .info
          margin-left 10px
          width 100%
          overflow hidden
          box-sizing border-box
          h1
            font-size 13px
            font-weight bold
            line-height 20px
            padding-top 10px
          p
            display flex
            flex-direction row
            align-items center
            justify-content space-between
            .price
              text-align left
              font-size 16px
              font-weight 700
              color red
              flex 1
          button
            color #007aff
            border none



</style>
